<template>
	<view class="classification-main flexR">
		<!-- 左侧一级分类 -->
		<view class="classification-left-box flexC">
			<scroll-view class="classification-left-scroll-view" scroll-y>
				<!-- 一级分类动画animation-y animation-no-->
				<view :class="['classification-left--info-mian',animation?'animation-y':'animation-no']">
					<view class="classification-left--info-box">
						<view v-for="(item,index) in classA" :key="index" @click="switchClassABut(index)" :class="['classification-left-info',
							classAIndex+1==index||classAIndex-1==index?'top-back':'']">
							<view :class="['name flexR text-over',
							classAIndex==index?'nameOn':'',
							classAIndex+1==index?'name-top-right-radius':'',
							classAIndex-1==index?'name-bottom-right-radius':'']
							">{{item.name}}</view>
						</view>
						<view class="animation-switch flexC">
							<text class="text">开启动画</text>
							<up-switch v-model="animation" @change="animationChange"></up-switch>
						</view>
					</view>
					<!-- 一级分类滑块 -->
					<view class="slider-box" :style="'margin-top:'+sliderMarginTop+'rpx'">
						<view class="slider-top white">
							<view class="slider-top-radius slider-box-size ash"></view>
						</view>
						<view class="slider-centre slider-box-size white">
						</view>
						<view class="slider-bottom white">
							<view class="slider-top-radius slider-box-size ash"></view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 右侧二级或商品列表 -->
		<view class="classification-right-box">
			<view class="goods-list">
				<view class="list-box flexR" v-for="item in classA[classAIndex].gods" @click="detailsJup">
					<image class="list-img" :src="item.imgUrl"></image>
					<view class="list-info-box">
						<view class="list-info">{{item.name}}</view>
						<view class="list-info flexR">
							<up-tag class="tag" v-for="tag in utils.splitStringToArray(item.tags)" :text="tag" plain
								size="mini" type="warning"></up-tag>
						</view>
						<view class="list-info">导演：XXXXX</view>
						<view class="list-info text-over">主演：XXXXX、XXXXX、XXXXX、XXXXX、XXXXX</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<tarBar :navIndex="1"></tarBar>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import utils from '../../utils/utils'
	import tarBar from '../../componenbts/tarBar.vue'
	const animation = ref(false) //动画开启关闭滑块
	const sliderMarginTop = ref(-120) //动画滑块顶部距离
	const classAIndex = ref(0) //一级分类已选下标
	const classA = ref([ //一级分类数据
		{
			id: 1,
			name: '热门电影',
			gods: [{
					id: 0,
					name: '沙丘',
					imgUrl: 'http://43.139.86.28:5000/poster/H01.jpg',
					tags: 'IMAX,3D',
					director: 'XXXXXX',
					star: 'XXXXX,XXXXX,XXXXX,XXXXX,XXXXX'
				},
				{
					id: 1,
					name: '沙丘',
					imgUrl: 'http://43.139.86.28:5000/poster/H01.jpg',
					tags: 'IMAX,3D',
					director: 'XXXXXX',
					star: 'XXXXX,XXXXX,XXXXX,XXXXX,XXXXX'
				}
			]
		}, {
			id: 2,
			name: '科幻电影',
			gods: [{
				id: 0,
				name: '阿凡达',
				imgUrl: 'http://43.139.86.28:5000/poster/H02.jpg',
				tags: 'IMAX,3D',
				director: 'XXXXXX',
				star: 'XXXXX,XXXXX,XXXXX,XXXXX,XXXXX'
			}]
		}, {
			id: 3,
			name: '奇幻电影',
			gods: [{
					id: 0,
					name: '沙丘',
					imgUrl: 'http://43.139.86.28:5000/poster/H01.jpg',
					tags: 'IMAX,3D',
					director: 'XXXXXX',
					star: 'XXXXX,XXXXX,XXXXX,XXXXX,XXXXX'
				},
				{
					id: 1,
					name: '阿凡达',
					imgUrl: 'http://43.139.86.28:5000/poster/H02.jpg',
					tags: 'IMAX,3D',
					director: 'XXXXXX',
					star: 'XXXXX,XXXXX,XXXXX,XXXXX,XXXXX'
				}
			]
		}, {
			id: 4,
			name: '功夫电影',
			gods: []
		}, {
			id: 5,
			name: '动作电影',
			gods: []
		}, {
			id: 6,
			name: '动画电影',
			gods: []
		}, {
			id: 7,
			name: '悬疑电影',
			gods: []
		}, {
			id: 8,
			name: '冒险片',
			gods: []
		},
		{}
	])

	// 一级分类切换
	const switchClassABut = (index) => {
		if (classA.value.length == index + 1) return
		classAIndex.value = index
		if (animation.value) {
			sliderMarginTop.value = index * 120 - 120
		}
		console.log(classAIndex.value, index)
	}

	// 动画切换
	const animationChange = (e) => {
		if (!e)sliderMarginTop.value=-120
		else sliderMarginTop.value=classAIndex.value*120-120
	}

	//详情跳转
	const detailsJup = () => {
		uni.navigateTo({
			url: '/pages/details/details'
		})
	}
</script>

<style lang="scss" scoped>
	.classification-main {
		background: #ffffff;
		height: 88vh;

		.classification-left-box {
			width: 210rpx;
			height: 100%;
			overflow: hidden;

			.classification-left-scroll-view {
				height: 100%;

				.classification-left--info-mian {
					height: 100%;
					background: #F4F4F4;
					border-top-right-radius: 25rpx;
					overflow: hidden;

					.classification-left--info-box {
						height: 100%;

						.classification-left-info {
							.name {
								width: 210rpx;
								height: 120rpx;
								padding: 0 20rpx;
								align-items: center;
								justify-content: center;
							}
						}

						.animation-switch {
							align-items: center;
							justify-content: center;
							padding-bottom: 50rpx;

							.text {
								margin-bottom: 10rpx;
								font-size: 30rpx;
								color: #aaaaaa;
							}
						}
					}
				}
			}
		}

		.classification-right-box {
			flex: 1;

			.goods-list {
				padding: 20rpx;

				.list-box {
					padding: 10rpx 0;
					border-bottom: 1rpx #eeeeee solid;

					.list-img {
						width: 130rpx;
						height: 185rpx;
					}

					.list-info-box {
						flex: 1;
						padding: 0 20rpx;

						.list-info {
							padding-bottom: 10rpx;

							.tag {
								margin-right: 10rpx;
							}
						}

						.list-info:last-child {
							padding-bottom: 0;
							width: 338rpx;
						}
					}
				}
			}
		}

		// 一级菜单过度无动画
		.animation-no {
			.classification-left--info-box {
				.classification-left-info {
					.name {
						background: #F4F4F4;
					}

					.nameOn {
						background: #ffffff;
					}

					.name-top-right-radius {
						border-top-right-radius: 25rpx;
					}

					.name-bottom-right-radius {
						border-bottom-right-radius: 25rpx;
					}
				}

				.top-back {
					background: #ffffff;
				}
			}
		}

		//一级菜单过度有动画
		.animation-y {
			position: relative;

			.classification-left--info-box {
				position: absolute;
				z-index: 10;
			}

			.slider-box {
				top: 0;
				position: absolute;
				z-index: 5;
				transition: .5s;

				.slider-box-size {
					width: 210rpx;
					height: 120rpx;
				}

				.white {
					background: #ffffff;
				}

				.ash {
					background: #F4F4F4;
				}

				.slider-top {
					.slider-top-radius {
						border-bottom-right-radius: 25rpx;
					}
				}

				.slider-centre {}

				.slider-bottom {
					.slider-top-radius {
						border-top-right-radius: 25rpx;
					}
				}
			}
		}
	}
</style>